<template>
  <div class="custom-wang-editor">
    <!-- 工具栏 -->
    <Toolbar :editor="editor" :defaultConfig="mergedToolbarConfig"  mode='default'/>

    <!-- 编辑器 -->
    <Editor
      :defaultConfig="mergedEditorConfig"
      v-model="content"
      @onCreated="handleEditorCreated"
      @onChange="handleChange"
      class="custom-editor"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const uploadUrl = process.env.VUE_APP_BASE_API + "/common/uploadByQiNiuYun"
export default {
  components: {
    Editor,
    Toolbar,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    editorConfig: {
      type: Object,
      default: () => ({}),
    },
    toolbarConfig: {
      type: Object,
      default: () => ({
      }),
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      editor: null, // 编辑器实例
      content: this.value, // 编辑器内容，初始值为父组件传递的value
    }
  },
  computed: {
    mergedEditorConfig() {
      // 合并父组件传递的配置和子组件的默认配置
      return {
        // placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            fieldName: 'file',
            maxFileSize: 5 * 1024 * 1024, // 100M
            server: uploadUrl,
            // 自定义插入图片
            customInsert(res, insertFn) {
                // res 即服务端的返回结果
                insertFn(res.data, "", "")
            },
          },
          uploadVideo: {
            fieldName: 'file',
            maxFileSize: 100 * 1024 * 1024, // 1M
            server: uploadUrl,
            customInsert(res, insertFn) {
                // res 即服务端的返回结果
                insertFn(res.data, "")
            },
          }
        },
        ...this.editorConfig,
      }
    },
    mergedToolbarConfig() { 
      return {
        excludeKeys: ["insertLink", "codeBlock", "todo"], // 排除菜单
        ...this.toolbarConfig
      }
    }

  },
  watch: {
    value(newValue) {
      // 父组件传递的 value 变化时，更新编辑器内容
      if (newValue !== this.content) {
        this.content = newValue
      }
    },
    disabled(newDisabled) {
      // 监听 disabled 的变化，动态控制编辑器是否可编辑
      if (this.editor) {
        if (newDisabled) {
          this.editor.disable(); // 禁用编辑器
        } else {
          this.editor.enable(); // 启用编辑器
        }
      }
    }
  },
  methods: {
    // 编辑器创建后的回调
    handleEditorCreated(editor) {
      this.editor = Object.seal(editor)

      // 根据初始化的 disabled 值控制编辑器状态
      if (this.disabled) {
        this.editor.disable(); // 禁用编辑器
      } else {
        this.editor.enable(); // 启用编辑器
      }
      console.log(this.editor.getAllMenuKeys())
    },
    // 编辑器内容改变时，通知父组件
    handleChange() {
      this.$emit('input', this.content)
    },
  },
  beforeDestroy() {
    // 组件销毁时，手动销毁编辑器实例
    if (this.editor) {
      this.editor.destroy()
      this.editor = null
    }
  },
}
</script>
<style lang="scss" scoped>
  .custom-wang-editor {
    border: 1px solid #ccc;
    .custom-editor {
      min-height: 300px;
    }
  }
  
</style>